Creating Slides with FRISE

Chris Pollett

July 11, 2024

Outline

Basic Presentation
Slide Controls
Slide Formatting
Credits

Basic Presentation

A FRISE presentation is a standard HTML document that includes the FRISE CSS and Javascript, and whose body has an onload event that initializes the slides.
Within the body of the document, the <x-slides> </x-slides> tag pair is used to encapsulate all the slides.
Individual slides are put between <x-slide> </x-slide> tags.
Let's look at an example...

Example Presentation

<!doctype html>
<html lang="en">
<head>
    <title>Slides using FRISE</title>
    <meta charset="UTF-8" >
    <link rel="stylesheet" href="frise/css/game.css" >
    <!--Link your own/other stylesheets here-->
</head>
<body onload="initSlides();">
<x-slides>
    <x-slide>
    <h1>First Slide<h1>
    <ul>
    <li>Point 1</li>
    <li>Point 2</li>
    </ul>
    </x-slide>
    <x-slide>
    <h1>Second Slide<h1>
    <ol>
    <li>Ordered Point 1</li>
    <li>Ordered Point 2</li>
    </ol>
    </x-slide>
</x-slides>
<script src="frise/js/game.js" ></script>
</body>
</html>

Slide Controls

The nav footer buttons left and right arrow keys, swipe right/left, can be used to go forwards and backwards through slides. The space bar and enter keys can also be used to go forward.
The nav footer can be hidden using the h or f keys.
The ⟳ button or 'r' key can be used to restart a presentation.
The ≡ button or 'a' key can be used to see all slides on a single page.
The x/num button or t key displays a page with the slide titles linking to each slide.

Slide Formatting

Within <x-slide></x-slide> tags one can put any standard html presentational elements. For example:
- Header tags (h1,..h6)
- Ordered, unordered, definition List tags (ol, ul, li, dl, dt, dd)
- Division tags like div, p, section, etc.
- Inline tags like b, i, span, etc.
One can also use any FRISE tags that can be used within an <x-present></x-present> tag pair such as: x-stage, x-speaker, x-dollhouse, x-outline, x-blur, etc. Hi all, I thought I'd drop in to show the x-speaker tag still works.

FRISE Slides with MathJax

One popular tool for adding math to HTML websites is MathJax.

To use MathJax in Frise based slides, include the MathJax script tags just before the script tag to include Frise in your HTML:

    <script>
    MathJax = {
      tex: {
        inlineMath: {'[+]': [['$', '$']]}
      }
    };
    </script>
    <script id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
    <script src="frise/js/game.js" ></script>

In the content of your slides you can then insert LateX math equations between dollar signs ($\$$) for inlign mode or double dollar signs ($\$\$$) to draw math within your slides.
For example, $\$\$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$\$\$$ renders as $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Credits

I have been a big fan of the W3C's/Dave Raggett's Slidy.
Slides within FRISE were inspired by Slidy, implemented from scratch, and incorporate FRISE features not found in Slidy.

Creating Slides with FRISE

Outline

Basic Presentation

Example Presentation

Slide Controls

Slide Formatting

More Slide Formatting

FRISE Slides with MathJax

Credits